<template>
  <view class="page">
<!--    <u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" title="签到记录" leftIconColor="#FFF"-->
<!--              @rightClick="rightClick" :autoBack="true"  >-->
<!--    </u-navbar>-->
    <view class="content">
      <view class="top">
        <view class="jilu":class="type=='1'?'active':''" @click="choose('1')">已签到<view class="num" v-if="count1">{{ '.'+count1 }}</view></view>
        <view class="jilu":class="type=='2'?'active':''"  @click="choose('2')">未签到<view class="num" v-if="count2">{{ '.'+count2 }}</view></view>
      </view>
      <view class="content_list">
        <view class="content_list_1" v-for="(item,index) in list" :key="index">
          <view class="nameurl">
            <u--image v-if="type=='1'" :src="item.avatar||'https://cdn.uviewui.com/uview/album/1.jpg'" shape="circle" width="80rpx"
                                            height="80rpx">
            </u--image>
            <view class="name" :class="type=='2'?'nameed':''">{{ item.name }}</view>


          </view>
          <view class="time" v-if="type=='1'">{{ item.signtime_text }}</view>
          <view class="time"  v-if="type=='2'">{{ item.phone }}</view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {
  signList
} from '@/api/signApi.js'
export default {
  data() {
    return {
      type:"1",
      count1:'',
      count2:'',
      list:[]
    }
  },
  onLoad() {
    this.getlist()
  },
  methods: {
    // gotoSchoolEvent(){
    //   uni.navigateTo({
    //     url: '/pages/tabbar-5-detial/schoolEvent/schoolEvent'
    //   });
    // }
    choose(type){
        this.type = type;
      this.getlist();
    },
    getlist(){
      this.list = [];
      let params = {
        token:uni.getStorageSync('token'),
        sign_type:this.type
      }
      signList(params).then(res => {
        this.isLoading = false;
        console.log(res)
        if(res.code == 1){
          this.list = res.data.list;
          this.count1 = res.data.count1;
          this.count2 = res.data.count2
        }
      })
    }
  }
}
</script>

<style>
.page{
  /* padding: 0 20rpx;	 */
  background-color: #f5f6f8;
  min-height: 100vh;
}
.content{
  display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
  flex-direction: column;
  padding: 40rpx;
  /*min-height: 100vh;*/
}
.jilu{
  display: flex;
  font-size: 36rpx;
  align-items: flex-end;
  padding: 0px 0 20rpx;
}
.jilu:first-child{
  margin-right: 30rpx;
}
.num{
  font-size: 32rpx;
}
.active{
  color:#4871C0;
  font-weight: 600;
  border-bottom: 4rpx solid #4871C0;
}
.top{
  width: 100%;
  display: flex;
}
.content_list{
  margin-top: 20px;
}
.content_list_1{
  width: 94%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}
.nameurl{
  display: flex;
  align-items: center;
}
.name{
  margin-left: 20rpx;
  font-weight: bold;
}
.nameed{
  margin-left: 0;
}
.names{
  margin-left: 20rpx;
}
.time{
  color:#838488;
  font-size: 30rpx;
}
/deep/.u-navbar--fixed{
  position: fixed;
}
</style>
